<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统日志</title>
    <link rel="stylesheet" href="../lib/Font-Awesome-6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
    <style>
        body {
            background-color: #fff;
            color: #2c3e50;
            padding: 20px;
            min-height: 100vh;
        }
        .dashboard-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 25px 30px;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 6px 20px rgba(175, 197, 222, 0.15);
            border: 1px solid #e0e7ed;
        }
        .header h1 {
            display: flex;
            align-items: center;
            font-size: 2rem;
            font-weight: 700;
            color: #2c3e50;
        }
        .header h1 i {
            margin-right: 15px;
            color: #3498db;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        .stat-card {
            background: #fff;
            border-radius: 18px;
            padding: 30px;
            box-shadow: 0 6px 20px rgba(175, 197, 222, 0.15);
            border: 1px solid #e0e7ed;
            text-align: left;
        }
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .card-header h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: #7f8c8d;
        }
        .card-header i {
            font-size: 1.6rem;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #5dade2, #3498db);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
        }
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            background: linear-gradient(to right, #3498db, #1abc9c);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -1px;
        }
        .stat-description {
            font-size: 0.95rem;
            color: #34495e;
            line-height: 1.6;
        }
        .charts-container {
            background: #fff;
            border-radius: 18px;
            padding: 25px;
            box-shadow: 0 6px 20px rgba(175, 197, 222, 0.15);
            border: 1px solid #e0e7ed;
            margin-bottom: 40px;
        }
        .chart-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            color: #2c3e50;
            display: flex;
            align-items: center;
        }
        .chart-title i {
            margin-right: 10px;
            color: #3498db;
        }
        .log-table-container {
            background: #fff;
            border-radius: 18px;
            padding: 25px;
            box-shadow: 0 6px 20px rgba(175, 197, 222, 0.15);
            border: 1px solid #e0e7ed;
        }
        .layui-table-view {
            border-radius: 12px;
        }
        .loading-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(255,255,255,0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
            border-radius: 18px;
        }
        .loading-spinner {
            border: 4px solid rgba(52, 152, 219, 0.15);
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .loading-text {
            color: #34495e;
            font-size: 1.1rem;
            font-weight: 500;
        }
        .error-message {
            color: #e74c3c;
            font-weight: 600;
            text-align: center;
            padding: 20px;
        }
        @media (max-width: 900px) {
            .charts-container, .log-table-container, .header {
                padding: 10px;
            }
            .stat-card {
                padding: 15px;
            }
        }
    </style>
    <script src="../lib/layui-v2.6.3/layui.js"></script>
    <script src="../js/lay-module/echarts/echarts.js"></script>
    <script src="../js/lay-module/echarts/echartsTheme.js"></script>
</head>
<body>
<div class="dashboard-container">
    <div class="header">
        <h1><i class="fas fa-server"></i> 系统日志</h1>
        <div class="date-time" id="current-date"></div>
    </div>
    <div class="stats-grid">
        <div class="stat-card">
            <div class="card-header">
                <h3>访问量</h3>
                <i class="fas fa-eye"></i>
            </div>
            <div class="stat-number" id="stat-total">--</div>
            <div class="stat-description">总访问量</div>
        </div>
        <div class="stat-card">
            <div class="card-header">
                <h3>访问成功</h3>
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-number" id="stat-success">--</div>
            <div class="stat-description">成功访问次数</div>
        </div>
        <div class="stat-card">
            <div class="card-header">
                <h3>访问失败</h3>
                <i class="fas fa-times-circle"></i>
            </div>
            <div class="stat-number" id="stat-fail">--</div>
            <div class="stat-description">失败访问次数</div>
        </div>
    </div>
    <div class="charts-container">
        <div class="chart-title"><i class="fas fa-chart-bar"></i> 一天内访问量趋势（每1小时）</div>
        <div id="logChart" style="width: 100%; height: 400px; position: relative;"></div>
    </div>
    <div class="log-table-container">
        <div class="chart-title"><i class="fas fa-table"></i> 日志明细</div>
        <table class="layui-hide" id="logTable" lay-filter="logTableFilter"></table>
    </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-module/echarts/echartsTheme.js"></script>
<script>
    // 日期时间
    function updateDateTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');
        const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        const weekday = weekdays[now.getDay()];
        document.getElementById('current-date').textContent = `${year}年${month}月${day}日 ${weekday} ${hours}:${minutes}:${seconds}`;
    }
    updateDateTime();
    setInterval(updateDateTime, 1000);

    layui.use(['table', 'jquery'], function(){
        var $ = layui.jquery, table = layui.table;
        // token处理
        $.ajaxSetup({
            beforeSend: function(xhr) {
                const data = JSON.parse(localStorage.getItem('user') || '{}');
                if (data.token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + data.token);
                }
            }
        });
        // 加载统计
        function loadStats() {
            $('#stat-total').text('--');
            $('#stat-success').text('--');
            $('#stat-fail').text('--');
            $.get('/syslog/stats', function(res){
                $('#stat-total').text(res.total || 0);
                $('#stat-success').text(res.success || 0);
                $('#stat-fail').text(res.fail || 0);
            }).fail(function(){
                $('#stat-total').text('--');
                $('#stat-success').text('--');
                $('#stat-fail').text('--');
            });
        }
        loadStats();
        // 加载图表
        function loadChart() {
            var chart = echarts.init(document.getElementById('logChart'), 'walden');
            chart.showLoading({text:'加载中...'});
            $.get('/syslog/hourly', function(res){
                var x = [], y = [];
                // 适配对象格式，按时间排序
                if(res.code === 0 && res.data){
                    Object.keys(res.data).sort().forEach(function(key){
                        x.push(key);
                        y.push(res.data[key]);
                    });
                }
                chart.hideLoading();
                chart.setOption({
                    tooltip: {},
                    xAxis: { data: x, axisLabel: { color: '#7f8c8d' }, axisLine: { lineStyle: { color: '#d5dce0' } } },
                    yAxis: { axisLabel: { color: '#7f8c8d' }, splitLine: { lineStyle: { color: '#e0e7ed' } } },
                    series: [{ 
                        type: 'bar', 
                        data: y, 
                        name: '访问量', 
                        itemStyle: { color: '#3498db', borderRadius: [8,8,0,0] }, 
                        label: { 
                            show: true, 
                            position: 'top', 
                            color: '#3498db', 
                            formatter: function(params) {
                                return params.value === 0 ? '' : params.value;
                            }
                        } 
                    }]
                });
            }).fail(function(){
                chart.hideLoading();
                chart.setOption({
                    title: { text: '数据加载失败', left: 'center', top: 'center', textStyle: { color: '#e74c3c', fontSize: 18 } }
                });
            });
        }
        loadChart();
        // 日志表格
        table.render({
            elem: '#logTable',
            url: '/syslog/table',
            cols: [[
                {field: 'log_id', title: '日志ID', width: 80, sort: true},
                {field: 'username', title: '用户名', width: 120},
                {field: 'roleName', title: '角色', width: 120},
                {field: 'action', title: '操作', width: 200},
                {field: 'timestamp', title: '时间', width: 180},
                {field: 'result', title: '是否成功', width: 120, templet: function(d){ return d.result && d.result.indexOf('成功')!==-1 ? '<span style="color:green;">成功</span>' : '<span style="color:red;">失败</span>'; }},
                {field: 'information', title: '错误信息', minWidth: 200}
            ]],
            page: true,
            limits: [5, 10, 20, 50],
            limit: 10,
            skin: 'line'
        });
    });
</script>
</body>
</html>